---
title: Code
description: A versatile code component for displaying inline and block code snippets with customizable styling and integrated buttons.
---
import { CodeExample, CodeVariants } from "./code.example";

## Overview

The Code component provides a consistent way to display code snippets within your application. It's designed to handle both inline and block code displays, with customizable styling options and integrated button functionality for an enhanced user experience.
## Usage

```tsx
import { Code, CopyButton, VisibleButton } from "@unkey/ui";

function MyComponent() {
  return (
    <Code
      copyButton={<CopyButton value="const hello = 'world';" />}
      visibleButton={<VisibleButton isVisible={true} setIsVisible={() => {}} />}
    >
      const hello = "world";
    </Code>
  );
}
```

## Examples

### Default Variant with Buttons
The default variant provides a subtle background with a border and integrated buttons for copying and visibility toggling.

<CodeExample />

### Variant Styles
The Code component supports different visual styles for various use cases.

<CodeVariants />

## Features

- **Multiple Variants**: Three different visual styles (default, ghost, legacy)
- **Integrated Buttons**: Built-in support for copy and visibility buttons
- **Consistent Typography**: Monospace font for code readability
- **Customizable Styling**: Extensive styling options through className props
- **Accessibility**: Built-in accessibility support with proper ARIA attributes
- **Responsive Design**: Adapts to different screen sizes
- **Focus States**: Proper focus management for keyboard navigation

## Props

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `variant` | `"default" \| "ghost" \| "legacy"` | `"default"` | The visual style of the code component |
| `className` | `string` | `undefined` | Additional CSS classes for the wrapper div |
| `buttonsClassName` | `string` | `undefined` | Additional CSS classes for the buttons container |
| `preClassName` | `string` | `undefined` | Additional CSS classes for the pre element |
| `copyButton` | `React.ReactNode` | `undefined` | Copy button component to display |
| `visibleButton` | `React.ReactNode` | `undefined` | Visibility toggle button component |

The component also accepts all standard HTML pre element props.

## Variants

### Default
- Subtle background with border
- White background in light mode, black in dark mode
- Gray border for visual separation
- Ideal for code snippets with buttons

### Ghost
- Transparent background
- No border
- Minimal visual impact
- Perfect for inline code or subtle code display

### Legacy
- Primary text color
- Subtle background
- Hover effects with primary border
- Rounded corners
- Backward compatibility option

## Structure

The Code component is composed of a main container with optional button integration:

1. **Code** - The main wrapper component
2. **Buttons Container** - Optional area for copy and visibility buttons
3. **Pre Element** - The actual code content container

## Styling

The Code component includes:

- Monospace font for code readability
- Consistent padding and border radius
- Focus states for keyboard navigation
- Hover effects for better interaction
- Dark mode support
- Responsive design
- Flexible button positioning

### Custom Styling

You can customize the appearance using className props:

```tsx
<Code 
  variant="default"
  className="custom-wrapper-class"
  buttonsClassName="custom-buttons-class"
  preClassName="custom-pre-class"
>
  Your code here
</Code>
```

## Accessibility

The Code component is built with accessibility in mind:

- **ARIA Attributes**: Proper ARIA labels and roles for screen readers
- **Keyboard Navigation**: Full keyboard support for all interactions
- **Focus Management**: Clear focus indicators and logical tab order
- **High Contrast**: Maintains proper contrast ratios
- **Semantic HTML**: Uses appropriate HTML elements and roles
- **Screen Reader Support**: Announces code content appropriately